import React, { PropTypes } from 'react'

import { Form, Button, Row, Col,DatePicker, Radio} from 'antd'
const echarts = require('echarts');

class chartMonthBottom extends React.Component {
  constructor (props) {
    super(props)

  }
  color(){
      return ['rgb(0, 228, 0)','rgb(255,255,0)','rgb(255,126,0)','rgb(255,0,0)','rgb(153,0,76)','rgb(126,0,35)']
  }
  legend(){
    return ["优","良","轻度污染","中度污染","重度污染","严重污染"]
  }
  
  series(){

  }
  initEcharts(){
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('chart-month-bottom'));
    const { dataSource } = this.props
    const self=this
    let xAxisdata=[]
    let so2 =[];
    let co =[];
    let no2 =[];
    let pm25 =[];
    let o3 =[];
    let pm10 =[];
    const items=dataSource.qualityAirAll.times;
    const yz=dataSource.qualityAirAll["严重"];
    const zhong=dataSource.qualityAirAll["中"];
    const you=dataSource.qualityAirAll["优"];
    const liang=dataSource.qualityAirAll["良"];
    const qing=dataSource.qualityAirAll["轻度"];
    const zhongdu=dataSource.qualityAirAll["重度"];

    for (let i=0;i<items.length;i++){
        let xaxi=""
        const str=items[i].split("-")
        if(items[i].indexOf("年")>=0){
            xaxi=items[i]
        }else if(self.props.activeMenu=="month"){
            xaxi=str[0]+"年"+str[1]+"月"
        }else if(self.props.activeMenu=="quarter"){
            xaxi=str[0]+"年"+str[1]+"季度"
        }else if(self.props.activeMenu=="halfyear"){
            xaxi=str[0]+"年"
            if(str[1]==1){
                xaxi+="上半年"
            }else{
                xaxi+="下半年"
            }
        }else if(self.props.activeMenu=="year"){
            xaxi=str[0]+"年"
        }else{
            xaxi=items[i]
        }

      xAxisdata=xAxisdata.concat(xaxi)
      so2=so2.concat(yz[i]);
      co=co.concat(zhong[i]);
      no2=no2.concat(you[i]);
      pm25=pm25.concat(liang[i]);
      o3=o3.concat(qing[i]);
      pm10=pm10.concat(zhongdu[i])
    }

   // 绘制图表
    myChart.setOption({
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:this.legend()
            },
            color:this.color(),
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : xAxisdata
                }
            ],
            yAxis : [
                {
                    name: '单位(天)',
                    type : 'value',
                }
            ],
            series : [
                {
                name:'优',
                type:'bar',
                stack: '广告',
                data:no2
              },
              {
                name:'良',
                type:'bar',
                stack: '广告',
                data:pm25
              },
                
              {
                name:'轻度污染',
                type:'bar',
                stack: '广告',
                data:o3
              },
              {
                name:'中度污染',
                type:'bar',
                stack: '广告',
                data:co
              },
               {
                name:'重度污染',
                type:'bar',
                stack: '广告',
                data:pm10
              },
              {
                name:'严重污染',
                type:'bar',
                stack: '广告',
                data:so2
              }
            ]
        });
  }
  shouldComponentUpdate(nextProps,nextState){
   
      return nextProps.timestamp!=this.props.timestamp
  }
  componentDidUpdate(){

      if(this.props.dataSource.qualityAirAll.times.length>0){
            this.initEcharts()
      }
  }
  componentDidMount(){

      window.requestAnimationFrame(function() {
        if(this.props.dataSource.qualityAirAll.times.length>0){
            this.initEcharts()
        }
      }.bind(this))
  }
  render(){
    if(this.props.dataSource.qualityAirAll.times.length==0){
           return (<Row gutter={24}></Row>)
        }
    return (

      <Row gutter={24}>
        <div id='chart-month-bottom' style={{width:'100%',height:'300px'}}></div>
      </Row>
    )
  }
}



chartMonthBottom.propTypes = {

};

export default chartMonthBottom
